<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="loginText">注册</span>
        <router-link class="link" to="/login">已有账号？登录</router-link>
      </div>
      <div class="card_body">
        <el-form :model="userInfo" status-icon :rules="rules" ref="userInfo" class="demo-userInfo">
          <el-form-item label prop="username">
            <el-input
              class="input"
              placeholder="请输入账号"
              v-model="userInfo.username"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label prop="password">
            <el-input
              class="input"
              placeholder="请输入密码"
              type="password"
              v-model="userInfo.password"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label prop="confirmPassword">
            <el-input
              class="input"
              placeholder="请确认密码"
              type="password"
              v-model="userInfo.confirmPassword"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label prop="area">
          <el-cascader
            class="input"
            label prop="area"
            expand-trigger="hover"
            :options="cityData"
            placeholder="你来自哪里？"
            v-model="userInfo.area"
          ></el-cascader>
          </el-form-item>
          
          <el-form-item label prop="age">
            <el-input class="input" placeholder="请输入年龄" v-model.number="userInfo.age"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="btn" type="info" @click="submitForm('userInfo')">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import router from "../models/router";
import cityData from '../models/city'

export default {
  name: "Register",
  data() {
    const validUsername = async (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        // check username from DB
        const { data } = await this.$req.user.checkUser({ username: value });
        if (data.status === -1) callback(new Error(data.message));
        else callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.userInfo.password !== "") {
          this.$refs.userInfo.validateField("confirmPassword");
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.userInfo.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    const checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("年龄不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value < 18) {
            callback(new Error("必须年满18岁"));
          } else {
            callback();
          }
        }
      }, 1000);
    };

    return {
      cityData: [],
      userInfo: {
        username: "",
        password: "",
        confirmPassword: "",
        area: "",
        age: ""
      },
      rules: {
        username: [
          { min: 4, max: 12, message: "长度在4-12位", trigger: "blur" },
          { validator: validUsername, trigger: "blur" }
        ],
        password: [
          { min: 6, max: 8, message: "长度在6-8位", trigger: "blur" },
          { validator: validatePass, trigger: "blur" }
        ],
        confirmPassword: [
          { min: 6, max: 8, message: "长度在6-8位", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" }
        ],
        area: [{ required: true, message: "请选择地区", trigger: "change" }],
        age: [{ validator: checkAge, trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          try {
            const res = await this.$req.user.register({
              username: this.userInfo.username,
              password: this.userInfo.password,
              area: this.userInfo.area,
              age: this.userInfo.age
            });
            if (res.data.status === 200) {
              this.$notify.success({
                title: "成功",
                message: res.data.message,
                duration: 1000
              });
              router.push("/login");
            }
          } catch (ex) {
            console.log(ex);
          }
        } else {
          return false;
        }
      });
    }
  },
  created() {
    this.cityData = cityData;
  }
};
</script>

<style scoped lang='scss'>
.login {
  width: 100%;
  height: 100%;
  position: relative;
  background: url("../assets/register.jpeg") no-repeat center center;
  background-size: 100% 100%;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 320px;
  position: absolute;
  left: 50px;
  top: 50px;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  -webkit-box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.5);
  color: #c6654f;
}
.box-card /deep/ .el-card__header {
  border: none;
  padding: 10px 12px;
}
.card_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.input /deep/ .el-input__inner {
  background-color: #d68b62;
  border: 1px solid #ba605c;
  color: #fff;
}
.input /deep/ .el-input__inner::-webkit-input-placeholder {
  color: #ba605c;
}
.input /deep/ .el-input__inner:-moz-placeholder {
  color: #ba605c;
}
.input /deep/ .el-input__inner:-ms-input-placeholder {
  color: #ba605c;
}
.el-cascader {
  width: 100%;
}
.el-cascader /deep/ .el-input.is-focus .el-input__inner {
  border-color: #a01711;
}
.link {
  float: right;
  padding: 3px 0;
  color: #ca5141;
  font-size: 14px;
  text-decoration-line: none;
}
.demo-userInfo {
  width: 100%;
  height: 100%;
}
.demo-userInfo /deep/ .el-form-item__error {
  color: #4c1515;
}
.btn {
  width: 100%;
  color: #ba4c43;
  background-color: #d27f5a;
  border-color: #d27f5a;
}
.el-button--info:focus,
.el-button--info:hover {
  background-color: #ba4c43;
  border-color: #ba4c43;
  color: #fff;
}
.loginText {
  font-weight: bold;
}
</style>
